<template>
	<view class="activity-card" :style="{
		minWidth: width
	}" @click="ToInfo">
		<view class="activity-status " :class="{ 'cancelled' : Info.status === 5,
			 'ongoing' : Info.status === 2 || Info.status === 3,
			 'completed' : Info.status === 4}">{{ Info.statusName }}</view>
		<view class="activity-image">
			<up-image :src="Info.image" width="100%" height="160px" radius="12px "></up-image>
		</view>
		<view class="activity-info">
			<view class="activity-title">{{ Info.title }}</view>
			<view class="activity-meta">
				<view class="meta-item">
					<view class="iconfont font-sm">&#xe602;</view>
					<view>{{ Info.startAt }}</view>
				</view>
				<view class="meta-item">
					<view class="iconfont font-sm">&#xe612;</view>
					<view>{{ Info.address }}</view>
				</view>
				<view class="meta-item">
					<view class="iconfont font-sm">&#xe626;</view>
					<view>{{ Info.joinNum }} / {{ Info.maxJoin }}</view>
				</view>
			</view>
			<view class="activity-leader">
				<up-image
					:src="Info.createUser?.avatar || `/static/svg/avatar.svg`"
					width="24px" height="24px" shape="circle"></up-image>
				<view class="leader-name">{{ Info.createUser?.nickName  }}</view>
				<view class="activity-price">
					<view class="free">免费</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	const props = defineProps({
		Info: {
			type: Object,
			default: () => ({})
		},
		width: {
			type: String,
			default: '280px'
		}
	})


	const ToInfo = () => {
		uni.navigateTo({
			url: '/subPackages/activity/Info?id=' + props.Info.id
		})
	}
</script>

<style lang="scss" scoped>
	.activity-card {
		background: white;
		border-radius: 12px;
		overflow: hidden;
		border: 1px solid #e1e5e9;
		cursor: pointer;
		transition: all 0.2s;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		margin-right: 16px;
		position: relative;

		.activity-status {
			position: absolute;
			top: 12px;
			right: 12px;
			display: flex;
			align-items: center;
			gap: 4px;
			padding: 4px 8px;
			border-radius: 12px;
			font-size: 12px;
			font-weight: 500;
			z-index: 10;
			backdrop-filter: blur(10px);

			&.ongoing {
				background: rgba(34, 197, 94, 0.1);
				color: #16a34a;
				border: 1px solid rgba(34, 197, 94, 0.2);
			}

			&.completed {
				background: rgba(100, 116, 139, 0.1);
				color: #64748b;
				border: 1px solid rgba(100, 116, 139, 0.2);
			}

			&.cancelled {
				background: rgba(239, 68, 68, 0.1);
				color: #dc2626;
				border: 1px solid rgba(239, 68, 68, 0.2);
			}
		}

		.activity-image {
			position: relative;
			height: 160px;
			overflow: hidden;
		}

		.activity-info {
			padding: 16px;

			.activity-title {
				font-size: 15px;
				font-weight: 600;
				color: #333;
				margin-bottom: 12px;
				line-height: 1.3;
			}

			.activity-meta {
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin-bottom: 16px;

				.meta-item {
					display: flex;
					align-items: center;
					gap: 8px;
					font-size: 12px;
					color: #666;
				}
			}
		}

		.activity-leader {
			display: flex;
			align-items: center;
			gap: 12px;

			.leader-name {
				flex: 1;
				font-size: 10px;
				color: #666;
			}

			.activity-price {
				font-size: 12px;
				font-weight: 600;
				color: #667eea;

				.free {
					color: #28a745;
				}
			}
		}
	}
</style>